<template>
  <div class="police-resource-distribution">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>辖区警力资源分布</screen-title>
      <div class="police-resource-distribution-content"></div>
      <district-list></district-list>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// @ts-ignore
import ThreejsOutlineMap from './ThreejsOutlineMap.js'
import { getNanningDistrict, getNanningFullDistrict } from 'api/home/screenCenter'
import districtList from './districtList.vue'
@Component({
  name: 'police-resource-distribution',
  components: {
    districtList
  }
})
export default class PoliceResourceDistribution extends Vue {
  private bgImg: string = require('assets/images/box-border-3.png')

  mounted(): any {
    this.getAllNanningDistrict()
  }

  // 获取南宁市区县区划
  private getNanningFullDistrict(): Promise<any> {
    return new Promise((resolve, reject) => {
      getNanningFullDistrict()
        .then((res: any) => {
          resolve(res)
        })
        .catch((err: any) => {
          reject(err)
        })
    })
  }

  // 获取南宁市区划
  private getNanningDistrict(): Promise<any> {
    return new Promise((resolve, reject) => {
      getNanningDistrict()
        .then((res: any) => {
          resolve(res)
        })
        .catch((err: any) => {
          reject(err)
        })
    })
  }

  // 执行两个promise
  private getAllNanningDistrict(): void {
    Promise.all([this.getNanningFullDistrict(), this.getNanningDistrict()]).then((res) => {
      const [mapData, outlineData] = res
      const map = new ThreejsOutlineMap({ mapData, outlineData })
      console.log(map)
    })
  }
}
</script>

<style lang="scss" scoped>
.police-resource-distribution {
  width: 100%;
  height: calc(75.08% - 16px - 17px);
  margin: 17px 0 16px;
  position: relative;
  &-content {
    width: 100%;
    height: calc(100% - 50px);
    position: relative;
  }
}
</style>
